<template>
  <el-dialog
    v-model="store.isVisible"
    :title="t('Edit session')"
    width="600px"
    @close="store.hide()"
  >
    <el-card>
      <!-- 开始时间行 -->
      <el-row :gutter="8" style="align-items: center;">
        <el-col :span="4">
          <label>{{ t('Start time') }}:</label>
        </el-col>
        <el-col :span="20">
          <el-text>{{ store.startTime }}</el-text>
        </el-col>
      </el-row>

      <!-- 持续时间行 -->
      <el-row :gutter="8" style="align-items: center;">
        <el-col :span="4">
          <label>{{ t('Duration') }}:</label>
        </el-col>
        <el-col :span="20">
          <el-text>{{ store.duration }}</el-text>
        </el-col>
      </el-row>

      <!-- 主机同步复选框 -->
      <el-row :gutter="8" style="align-items: center;">
        <el-col :span="24">
          <el-checkbox v-model="store.hostSync">
            {{ t('Host synchronized with time server') }}
          </el-checkbox>
        </el-col>
      </el-row>

      <!-- 注释文本域 -->
      <el-row :gutter="8" style="align-items: center;">
        <el-col :span="24">
          <label>{{ t('Comments') }}:</label>
          <el-input
            v-model="store.comments"
            type="textarea"
            :rows="3"
          />
        </el-col>
      </el-row>

      <!-- 属性表格 -->
      <el-row :gutter="8" style="align-items: center;">
        <el-col :span="24">
          <label>{{ t('Properties') }}:</label>
          <el-table
            :data="store.properties"
            style="width: 100%;"
            @current-change="handleCurrentChange"
            highlight-current-row
          >
            <el-table-column prop="key" :label="t('Key')" width="200">
              <template #default="{ row, $index }">
                <el-input
                  v-model="row.key"
                  size="small"
                  spellcheck="false"
                />
              </template>
            </el-table-column>
            <el-table-column prop="value" :label="t('Value')">
              <template #default="{ row, $index }">
                <el-input
                  v-model="row.value"
                  size="small"
                  spellcheck="false"
                />
              </template>
            </el-table-column>
          </el-table>
          
          <!-- 添加/删除按钮 -->
          <div style="margin-top: 8px;">
            <el-button
              type="primary"
              size="small"
              @click="store.addProperty()"
            >
              {{ t('Add') }}
            </el-button>
            <el-button
              type="danger"
              size="small"
              :disabled="!store.canRemoveProperties"
              @click="store.removeCurrentProperty()"
            >
              {{ t('Remove') }}
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 对话框底部按钮 -->
    <template #footer>
      <div style="display: flex; justify-content: space-between;">
        <el-button
          type="danger"
          @click="store.removeSession()"
        >
          {{ t('Delete') }}
        </el-button>
        <el-button
          type="primary"
          @click="store.hide()"
        >
          {{ t('OK') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
  
<script setup>
import { useSessionEditorStore } from '@/stores/sessionEditor'
import { useLanguageStore } from '@/stores/language'

const store = useSessionEditorStore()
const languageStore = useLanguageStore()

// 处理当前行变化
const handleCurrentChange = (currentRow) => {
  if (currentRow) {
    const index = store.properties.findIndex(prop => prop === currentRow)
    store.setCurrentRow(index)
  } else {
    store.setCurrentRow(-1)
  }
}
  
// 翻译函数
const t = (key) => {
  const translations = {
    'Edit session': {
      'en': 'Edit session',
      'zh': '编辑session'
    },
    'Start time': {
      'en': 'Start time',
      'zh': '开始时间'
    },
    'Duration': {
      'en': 'Duration',
      'zh': '持续时间'
    },
    'Host synchronized with time server': {
      'en': 'Host synchronized with time server',
      'zh': '主机与时间服务器同步'
    },
    'Comments': {
      'en': 'Comments',
      'zh': '简介'
    },
    'Properties': {
      'en': 'Properties',
      'zh': '属性'
    },
    'Key': {
      'en': 'Key',
      'zh': '键'
    },
    'Value': {
      'en': 'Value',
      'zh': '值'
    },
    'Add': {
      'en': 'Add',
      'zh': '添加'
    },
    'Remove': {
      'en': 'Remove',
      'zh': '删除'
    },
    'Delete': {
      'en': 'Delete',
      'zh': '删除'
    },
    'OK': {
      'en': 'OK',
      'zh': '确认'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}
</script>